import React, { FC, useMemo, useRef } from "react";
import classNames from "classnames/bind";
import style from "./index.module.scss";
import { Button, Space, Typography, Input, Tooltip, InputRef, message, Popover } from "antd";
import { LeftOutlined } from "@ant-design/icons";
import useGetPageInfo_redux from "../../../hooks/useGetPageInfo_redux";
import { CopyOutlined, QrcodeOutlined } from "@ant-design/icons";
import { useNavigate, useParams } from "react-router-dom";
import QRCode from "qrcode.react";
const { Title } = Typography;
const CBN = classNames.bind(style);

const StateHead: FC = () => {
  const { title, isPublish } = useGetPageInfo_redux();
  const { id } = useParams();
  const nav = useNavigate();
  const urlref = useRef<InputRef>(null);
  function copy() {
    const elem = urlref.current;
    if (elem == null) return;
    elem.select();
    document.execCommand("copy");
    message.success("拷贝成功");
  }

  // function getLinkandQRcode() {
  //   if (!isPublish) return null;
  //   const url = `https://localhost:3000/question/${id}`;

  //   const Qrcode = (
  //     <div>
  //       <QRCode value={url}></QRCode>
  //     </div>
  //   );
  //   return (
  //     <Space>
  //       <Input value={url} style={{ width: "380px", textAlign: "center" }} ref={urlref}></Input>
  //       <Tooltip title="拷贝链接">
  //         <Button icon={<CopyOutlined />} onClick={copy}></Button>
  //       </Tooltip>
  //       <Popover content={Qrcode}>
  //         <Button icon={<QrcodeOutlined />}></Button>
  //       </Popover>
  //     </Space>
  //   );
  // }
  //定义二维码组件 使用usememo进行重构
  //1.依赖项是否经常变化 2.缓存的元素是否创建成本太高
  const getLinkandQRcode = useMemo(() => {
    if (!isPublish) return null;
    const url = `https://localhost:3000/question/${id}`;

    const Qrcode = (
      <div>
        <QRCode value={url}></QRCode>
      </div>
    );
    return (
      <Space>
        <Input value={url} style={{ width: "380px", textAlign: "center" }} ref={urlref}></Input>
        <Tooltip title="拷贝链接">
          <Button icon={<CopyOutlined />} onClick={copy}></Button>
        </Tooltip>
        <Popover content={Qrcode}>
          <Button icon={<QrcodeOutlined />}></Button>
        </Popover>
      </Space>
    );
  }, [id, isPublish]);
  return (
    <div className={CBN("stateHeadWrapper")}>
      <div className={CBN("header")}>
        <div className={CBN("left")}>
          <Space direction="horizontal" align="center" size="middle">
            <Button
              icon={<LeftOutlined />}
              type="link"
              onClick={() => {
                nav(-1);
              }}
            >
              返回
            </Button>
            <Title level={3} style={{ margin: "0" }}>
              {title}
            </Title>
          </Space>
        </div>
        <div className={CBN("middle")}>{getLinkandQRcode}</div>
        <div className={CBN("right")}>
          <Button
            type="primary"
            onClick={() => {
              nav(`/question/edit/${id}`);
            }}
          >
            编辑问卷
          </Button>
        </div>
      </div>
    </div>
  );
};

export default StateHead;
